<template>
	<div class="operation">
		<div>
			<van-nav-bar left-arrow title="绑定运维" @click-left="onClickLeft" />
		</div>
		<div class="operationContent">
			<div class="operationTop">
				<van-field readonly clickable name="picker" :value="auxType" label="类型" placeholder="点击选择类型"
					@click="showType = true" is-link />
				<van-popup v-model="showType" position="bottom">
					<van-picker show-toolbar value-key="label" :columns="treeData" title="请选择类型" @confirm="optionType"
						@cancel="showType = false" />
				</van-popup>

				<van-field readonly clickable name="picker" :value="auxObject" label="职位" placeholder="点击选择职位"
					@click="showObject = true" is-link />
				<van-popup v-model="showObject" position="bottom">
					<van-picker show-toolbar value-key="label" :columns="treeDataName" title="请选择职位"
						@confirm="optionObject" @cancel="showObject = false" />
				</van-popup>
				<van-field readonly clickable name="picker" :value="auxValue" label="名称" placeholder="点击选择名称"
					@click="showValue = true" is-link />
				<van-popup v-model="showValue" position="bottom">
					<van-picker show-toolbar value-key="userName" :columns="treeDataValue" title="请选择名称"
						@confirm="optionValue" @cancel="showValue = false" />
				</van-popup>
				<van-field name="switch" label="状态">
					<template #input>
						<van-switch v-model="forms.auxState" active-color="#00A854" :active-value="1"
							:inactive-value="0" size="20" />
					</template>
				</van-field>
				<div style="margin: 16px;">
					<div class="flex-c" @click="submit_save" style="width: 305px;
height: 33px;
background: #0580FF;
border-radius: 5px;font-size: 15px;
font-family:auto;
font-weight: bold;
color: #FFFFFF;">
						保存
					</div>
					<!-- <van-button round block type="info" @click="submit_save">保存</van-button> -->
				</div>
			</div>

			<div class="operationBottom" :style="`width: 100%;height:${height-359.97}px; overflow-y: scroll;`">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<van-cell class="operationCell" v-for="(item,index) in operationTist" :key="index">
							<div>
								<span class="f-14500" style="font-size: 14px  ;
		font-family: auto ;
		font-weight: 500   ;
		color: #666666  ;">
									类型：
								</span>
								<span class=" " style="font-size: 14px;
font-family: auto;
font-weight: bold;
color: #000000;">{{item.auxTypeName}}</span>
							</div>
							<div>
								<span class="f-14" style="font-size: 14px  ;
		font-family: auto ;
		font-weight: 500   ;
		color: #666666  ;">
									职位：
								</span>
								<span class=" " style="font-size: 14px;
font-family: auto;
font-weight: bold;
color: #000000;">{{item.auxObjectName}}</span>
							</div>
							<div>
								<span class="f-14500" style="font-size: 14px  ;
		font-family: auto ;
		font-weight: 500   ;
		color: #666666  ;">
									姓名：
								</span>
								<span class=" " style="font-size: 14px;
font-family: auto;
font-weight: bold;
color: #000000;">{{item.auxValueName }}</span>
							</div>
							<div>
								<span class="f-14500" style="font-size: 14px  ;
		font-family: auto ;
		font-weight: 500   ;
		color: #666666  ;">
									电话：
								</span>
								<span class=" " style="font-size: 14px;
font-family: auto;
font-weight: bold;
color: #000000;">{{item.auxValueAux }}</span>
							</div>
							<div>
								<span class="f-14500">
									状态：
								</span>
								<van-switch class="bottomState" v-model="item.auxState" disabled active-color="#00A854"
									:active-value="1" :inactive-value="0" size="18" />
							</div>
							<div class="operationBtn flex-space" style="margin-top: 30px;">
								<div class="flex-c" @click="click_singledel(item.relationId)" style="border: 1px solid #FA3131;
border-radius: 5px;font-size: 15px;margin-right: 15px;width: 70px;
height: 33px;
font-family: auto;
font-weight: 500;
color: #FA3131;">
									删除
								</div>
								<div class="flex-c" @click="click_edit(index)" style="background: #0580FF; font-size: 15px;
font-family:auto;width: 220px;
height: 33px;
font-weight: 500;
color: #FFFFFF;
border-radius: 5px;">编辑

								</div>
								<!-- <button @click="click_singledel(item.relationId)">删除</button> -->
								<!-- <button @click="click_edit(index)">编辑</button> -->

							</div>
						</van-cell>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Toast,
		Dialog
	} from 'vant';
	import {
		GetList,
		getSelectTree,
		getTree,
		GetListByJobs,
		SetDetail,
		delDetail
	} from '@/api/setting/bindperations.js'
	import {
		String
	} from "@/api/validate.js";
	export default {
		data() {
			return {
				keychecked: [], // 选中的ID
				forms: {},
				auxType: '',
				auxObject: '',
				auxValue: '',
				showType: false,
				switchChecked: false,
				showObject: false,
				switchChecked1: false,
				showValue: false,
				switchChecked2: false,
				operationTist: [],
				loading: false,
				finished: false,
				refreshing: false,
				treeData: [],
				treeDataName: [],
				treeDataValue: [],
				height: 100,
				isEdit: true,
			}
		},
		mounted() {
			this.client() //获取高度

		},
		created() {
			this.loadSelectData()
			this.operationData(this.$route.query.TerminalId)
		},
		methods: {
			onClickLeft() {
				// this.$router.go(-1)
				this.$router.push({
					path: '/setting',
					query: {
						setting: true,
					}
				})
			},
			client() {
				this.$nextTick(() => {
					this.height = document.body.clientHeight;
				});
			},
			// 点击保存保存的时候
			submit_save() {
				if (this.forms.auxType.length === 0) {
					Toast({
						message: '名称不允许为空',
						type: 'warning'
					})
					return false
				}
				if (this.forms.auxObject.length === 0) {
					Toast({
						message: '类型值不允许为空',
						type: 'warning'
					})
					return false
				}
				if (this.forms.auxValue.length === 0) {
					Toast({
						message: 'Value不允许为空',
						type: 'warning'
					})
					return false
				}
				// 通过ID判断是修改还是添加
				if (this.forms.relationId === '') {
					this.isEdit = false
				} else {
					this.isEdit = true
				}
				this.finished = true
				// 判断运维人员有没有被重复绑定
				var att = this.operationTist.some((item) => {
					return item.auxType == this.forms.auxType && item.auxObject == this.forms.auxObject && item
						.auxValue == this.forms.auxValue
				})
				if (att) {
					Toast({
						message: '已绑定此运维人员，请重新选择',
						type: 'warning'
					})
					return false
				}
				SetDetail(this.forms, this.isEdit).then((req) => {
						if (req.data.success) {
							Toast.success('操作成功！');
							this.clearform()
							this.operationData(this.$route.query.TerminalId)
							this.finished = false
						} else {
							Toast.fail('操作失败！');
						}

					})
					.catch((err) => {
						Toast.fail(err.message)
						this.finished = false
						return false
					})
			},
			click_edit(index) {
				this.loadSelectData()
				this.changeNameSelected(this.operationTist[index].auxObject.toString())
				this.changeSelected(this.operationTist[index].auxType.toString())
				this.forms = {
					terminalId: this.operationTist[index].terminalId,
					relationId: this.operationTist[index].relationId,
					auxType: this.operationTist[index].auxType,
					auxObject: this.operationTist[index].auxObject,
					auxValue: this.operationTist[index].auxValue,
					auxState: this.operationTist[index].auxState
				}
				this.auxType = this.operationTist[index].auxTypeName
				this.auxObject = this.operationTist[index].auxObjectName
				this.auxValue = this.operationTist[index].auxValueName

			},
			//删除
			click_singledel(val) {
				this.keychecked = []
				this.keychecked.push(val)
				this.del()
			},
			del() {
				Dialog.confirm({
					title: '提示',
					message: '此操作将永久删除数据, 是否继续?',
				}).then(() => {
					this.listLoading = true
					delDetail(this.keychecked).then(() => {
							Toast.success({
								message: '删除成功！',
								type: 'success'
							})
							this.keychecked = []
							this.listLoading = false
							this.operationData(this.$route.query.TerminalId)
						})
						.catch(() => {
							this.listLoading = false
						})
				}).catch(() => {
					Toast.fail({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			onLoad() {
				if (this.refreshing) {
					this.operationData(this.$route.query.TerminalId)
					this.refreshing = false;
				}
				this.loading = false;
				this.finished = true;

			},
			onRefresh() {
				this.finished = false;
				this.loading = true;
				this.onLoad();
			},

			//类型
			optionType(value) {
				this.auxType = value.label
				this.forms.auxType = value.value
				this.showType = false;
				this.changeSelected(this.forms.auxType)
			},
			//职称
			optionObject(value) {
				this.auxObject = value.label
				this.forms.auxObject = value.value
				this.showObject = false;
				this.changeNameSelected(this.forms.auxObject)
			},
			// 名称
			optionValue(value) {
				this.auxValue = value.userName;
				this.forms.auxValue = value.userId;
				this.showValue = false;
			},
			// 获取类型的下拉
			loadSelectData() {
				this.loading = true;
				getSelectTree('JobType').then(response => {
					this.treeData = response.data.data
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			// 获取职称的下拉
			changeSelected(val) {
				// this.loading = true;
				const postdata = [{
					'field': 'type',
					'value': val
				}]
				getTree(postdata).then(response => {
					this.treeDataName = response.data.data
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			// 获取名称的下拉
			changeNameSelected(val) {
				this.loading = true;
				const postdata = [{
					'field': 'JobId',
					'value': val
				}]
				GetListByJobs(postdata).then((response) => {
					this.treeDataValue = response.data.data
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			clearform() {
				this.auxType = '',
					this.auxObject = '',
					this.auxValue = '',
					this.keychecked = [],
					this.treeData = [],
					this.treeDataName = [],
					this.treeDataValue = [],
					this.forms = {
						terminalId: this.$route.query.TerminalId,
						relationId: '',
						auxType: '',
						auxObject: '',
						auxValue: '',
						auxState: 1
					}
				this.loadSelectData()
			},
			// 页面渲染时请求的数据
			operationData(id) {
				this.loading = true;
				this.clearform();
				GetList(id).then(response => {
					this.operationTist = response.data.data
					this.loading = false;
				}).catch((err) => {
					Toast.fail({
						message: err.message,
						type: 'error'
					});
					this.loading = false;
				})
			}
		},
	}
</script>

<style scope>
	.operation {
		font-size: 0px !important;
	}

	.van-cell__title span {
		font-size: 12px !important;
		font-family: auto !important;
		font-weight: 500 !important;
		color: #666666 !important;
	}

	.van-field__body input {
		font-size: 14px;
		font-family: auto;
		font-weight: 500;
		color: #BBBBBB;
	}

	.van-cell__value {}

	.operation .operationCell {
		width: 92%;
		margin: 0 auto;
		box-shadow: 0px 1px 2px 0px rgba(236, 236, 236, 1);
		border-radius: 5px;
		margin-bottom: 10px;
	}

	/* 	.operation .operationBtn button:nth-child(1) {
		margin-top: 10px;
		margin-right: 70px;
		background: white;
		border: 1px solid rgb(90, 170, 90);
		border-radius: 3px;
	}

	.operation .operationBtn button:nth-child(2) {
		background: white;
		border-radius: 3px;
		border: 1px solid rgb(230, 104, 104);
	} */

	.operation .operationTop {
		width: 92%;
		margin: auto;
		margin-top: 10px;
	}

	.operation .bottomState {
		transform: translate(0px, 4px);
	}
</style>
